<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('菜单管理')" />
    <th:block th:include="include :: treegrid-css" />
</head>
<body class="hold-transition skin-blue sidebar-mini layout-boxed">
<div class="wrapper">
    <th:block th:include="include :: headbar" />
    <th:block th:include="include :: sidebar" />
    <div class="content-wrapper">
        <section class="content-header">
            <h1>&nbsp;</h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">系统管理</a></li>
                <li class="active">菜单管理</li>
            </ol>
        </section>
        <section class="content">
            <div class="box box-solid">
                <!--<form class="box-header with-border form-inline" id="form">-->
                    <!--<input type="text" class="form-control input-sm" placeholder="菜单名称" name="menuName">-->
                    <!--<button type="button" class="btn btn-success btn-sm btn-flat" onclick="$.table.search('form')"><i class="fa fa-search"></i> 搜索</button>-->
                <!--</form>-->
                <div class="box-body">
                    <div class="btn-group-sm form-inline" id="toolbar" menu="group">
                        <button type="button" class="btn btn-success btn-sm btn-flat" onclick="$.operate.add()"><i class="fa fa-plus"></i> 添加</button>
                        <button type="button" class="btn btn-primary btn-sm btn-flat" onclick="$.operate.edit()"><i class="fa fa-edit"></i> 修改</button>
                        <button type="button" class="btn btn-danger btn-sm btn-flat" onclick="$.operate.remove()"><i class="fa fa-remove"></i> 删除</button>
                        <button type="button" class="btn btn-default btn-sm btn-flat" onclick="expandAll()"><i class="fa fa-exchange"></i> 展开/折叠</button>
                    </div>
                    <table id="bootstrap-table" data-mobile-responsive="true"></table>
                </div>
            </div>
        </section>
    </div>
    <th:block th:include="include :: copyright" />
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: treegrid-js" />
<script th:inline="javascript">
    var prefix = "/system/menu";
    $(function() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + '/add',
            removeUrl: prefix + '/remove',
            updateUrl: prefix + '/edit/{id}',
            sortName: "menu_sort",
            uniqueId: 'menuId',
            modalName: "菜单",
            modalWidth: 300,
            modalHeight: 500,
            onPostBody: onPostBody,
            responseHandler: responseHandler,
            treeShowField: 'menuName',
            idField: 'menuId',
            parentIdField: 'parentId',
            sidePagination: 'client',
            pagination: false,
            columns: [
                { checkbox: true },
//                { field: 'menuId', title: '菜单ID' },
                { field: 'menuName', title: '菜单名称' },
                { field: 'menuSort', title: '显示顺序' },
                { field: 'url', title: '请求地址' },
                { field: 'menuType', title: '类型', formatter: typeFormatter },
                { field: 'perms', title: '权限标识' }]
        };
        $.table.init(options);
    });

    var expandFlag = true;
    function expandAll(){
        if (expandFlag) {
            $('#bootstrap-table').treegrid('expandAll');
        } else {
            $('#bootstrap-table').treegrid('collapseAll');
        }
        expandFlag = !expandFlag;
    }

    function onPostBody(){
        $('#bootstrap-table').treegrid({
            initialState: 'collapsed',   //expanded   collapsed
            treeColumn: 1,
            expanderExpandedClass: 'fa fa-angle-down',
            expanderCollapsedClass: 'fa fa-angle-right'
        });
    }

    function responseHandler(resp){
        return resp.data;
    }

    function typeFormatter(value, row, index) {
        if (row.menuType == 'M') {
            return '<span class="label label-success">目录</span>';
        }else if (row.menuType == 'C') {
            return '<span class="label label-primary">菜单</span>';
        }else if (row.menuType == 'F') {
            return '<span class="label label-warning">按钮</span>';
        }
    }

    /* 角色状态显示 */
    function statusFormatter(value, row, index) {
        if (row.status == 1) {
            return '<i class=\"fa fa-toggle-on text-info fa-lg\" onclick="disable(\'' + row.menuId + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-off text-info fa-lg\" onclick="enable(\'' + row.menuId + '\')"></i> ';
        }
    }

    /* 菜单管理-停用 */
    function disable(menuId) {
        $.post(prefix + "/changeStatus", { "menuId": menuId, "status": 0 }, function(resp){
            $.table.refresh();
        });
    }

    /* 菜单管理启用 */
    function enable(menuId) {
        $.post(prefix + "/changeStatus", { "menuId": menuId, "status": 1 }, function(resp){
            $.table.refresh();
        });
    }
</script>
</body>
</html>
